<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link href="../../css/bootstrap.min.css?v=3.3.5" rel="stylesheet">
		<link href="../../css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
		<link href="../../css/plugins/iCheck/custom.css" rel="stylesheet">
		<link href="../../css/animate.min.css" rel="stylesheet">
		<link href="../../css/style.min.css?v=4.0.0" rel="stylesheet">
		<base target="_blank">
		
		<script src="../../js/vue/vue.js?v=1.0"></script>
	</head>

	<body class="gray-bg" id="myFirstVue">
		<div class="wrapper wrapper-content animated fadeInRight">
			<div class="row">
				<div class="col-sm-12">
					<div class="ibox float-e-margins">
						<div class="ibox-content">
							<div class="row">
								<div class="col-sm-2">
									<input type="text" placeholder="角色名称" class="input-sm form-control" > 
								</div>
								<div class="col-sm-2">
									<div class="btn-toolbar">
						              <button type="button" class="btn btn-sm btn-primary"><i class="glyphicon glyphicon-search"></i>搜索</button>
						           </div>
								</div>
							</div>
							<div class="table-responsive">
								<table class="table table-striped table-bordered table-hover">
									<thead>
										<tr>
											<th>角色名称</th>
											<th>排序</th>
											<th>创建时间</th>
											<th>操作</th>
										</tr>
									</thead>
									<tbody >
										<tr v-for="todo in todos">
											<td>{{todo.text}}</td>
											<td>{{todo.text}}</td>
											<td>{{todo.phone}}</td>
											<td class="project-actions">
												<a href="#" class="btn btn-sm btn-info"><i class="glyphicon glyphicon-pencil"></i> 编辑</a>
												<a href="#" class="btn btn-sm btn-danger" ><i class="fa fa-times"></i>删除</a>
												<a href="#" class="btn btn-sm btn-default"><i class="glyphicon glyphicon-cog"></i>查看</a>
												<a href="#" class="btn btn-sm btn-warning"><i class="glyphicon glyphicon-lock"></i>授权</a>
											</td>
										</tr>
									</tbody>
								</table>
							</div>

						</div>

					</div>
				</div>

			</div>
		</div>
	</body>
<script>
new Vue({
  el: '#myFirstVue',
  data: {
    todos: [
      { text: 'Learn JavaScript',phone:'18665716497' },
      { text: 'Learn Vue.js',phone:'18665716496' },
      { text: 'Build Something Awesome',phone:'18665716495' }
    ]
  }
})
</script>
</html>